<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="renderer" content="webkit">
    <title></title>
    <link rel="stylesheet" th:href="@{/css/pintuer.css}">
    <link rel="stylesheet" th:href="@{/css/admin.css}">
    <link rel="stylesheet" th:href="@{/md/css/editormd.css}"/>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"/>
    <style>
        .r{
            display:inline-block
        }
        .yuan{
            margin-left: 2px;
            padding-left: 10px;
            border-radius:25px;
            border: 0px;
        }
        .bg{
            background-color: #e7e7e7;
        }
        .layui-form-select dl {overflow: auto; max-height:185px; }
    </style>
</head>
<body>
<div class="bg panel admin-panel">
    <form name="mdEditorForm" class="layui-form layui-form-pane">
        <div class="panel-head">
            <strong class="icon-pencil-square-o"> 修改文章</strong>
        </div>
        <input id="articleId" name="articleId" type="hidden" th:value="${b.getArticleId()}">
        <div class="padding border-bottom" align="center">
            <div class="layui-form-item layui-inline">
                <label class="layui-form-label">文章名：</label>
                <div class="layui-input-block">
                    <input class="layui-input" id="title" name="title" th:value="${b.getTitle()}" autocomplete="off"/>
                </div>
            </div>
            <div class="layui-form-item layui-inline">
                <label class="layui-form-label">分类：</label>
                <div class="layui-input-block">
                    <select id="groupsId" name="groupsId" class="layui-input" lay-verify="required" lay-search="">
                        <option th:each="group:${groups}" th:selected="${group.getGroupsId()==b.getGroupsId()}"  th:value="${group.getGroupsId()}" th:text="${group.getGname()}"></option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item layui-inline">
                <label class="layui-form-label">标签：</label>
                <div class="layui-input-block">
                    <input id="tags" name="tags" class="layui-input" th:value="${b.getTags()}"  placeholder="多个标签用;号间隔" autocomplete="off"/>
                </div>
            </div>
            <div class="layui-form-item layui-inline">
                <label class="layui-form-label">文章描述：</label>
                <div class="layui-input-block">
                    <input id="description" name="description" th:value="${b.getDescription()}" class="layui-input" size="20"  placeholder="文章描述0-30字" autocomplete="off"/>
                </div>
            </div>
        </div>
        <div id="article-content">
            <textarea name="content" id="content" style="display: none">[[${b.content}]]
            </textarea>
        </div>
    </form>
    <input id="importFile" type="hidden" />
</div>
</body>
<script th:src="@{/js/jquery.js}"></script>
<script th:src="@{/md/editormd.js}"></script>
<script th:src="@{/md/copyImg.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<script type="text/javascript">
    var testEditor;
    layui.use(['form', 'laydate'], function() {
        var form = layui.form,
            laydate = layui.laydate;

    });
    layui.use('upload', function(){
        var upload = layui.upload;
        var uploadInst = upload.render({
            elem: $("#importFile") //绑定元素
            ,url: '/article/fileupload' //上传接口
            ,accept: 'file' //允许上传的文件类型
            ,acceptMime: 'file/txt,file/md'
            ,exts: 'txt|md'
            ,size: 10000 //最大允许上传的文件大小
            ,drag: false
            ,auto: true

            //上传前的回调
            /*	,before: function () {
                    /!*this.data = {
                        'title': $('#title').val(),
                        'description': $('#description').val(),
                        'filegroupId':$('#filegroupId').val(),
                        'price':$('#price').val()
                    };*!/
                    console.log("this.data");  //查看是否成功获得数据
                }*/
            ,done: function(res){
                //上传完毕回调
                if (res.code == 200){
                    layui.use('layer',function(){
                        layer=layui.layer;
                        layer.msg('导入成功',{
                            icon:1
                        });
                    });

                    $("#content").text(res.data)
                    EditorData(res.data)
                }else {
                    layui.use('layer',function(){
                        layer=layui.layer;
                        layer.msg('导入失败',{
                            icon:2
                        });
                    });
                }


            }
            ,error: function(){
                //请求异常回调
                alert("上传异常");
            }
        });
    });
    //window.onload = function(){ }
    $(function() {
        EditorData("")
        // testEditor = editormd("article-content", {
        // 	placeholder: '欢迎使用',
        // 	width : "95%",
        // 	height : "500px",
        // 	syncScrolling : "single",
        // 	path : "../md/lib/", //使用自己的路径
        // 	saveHTMLToTextarea : true,    // 保存 HTML 到 Textarea
        // 	emoji: true,
        // 	/* theme: "dark",//工具栏主题
        //      previewTheme: "dark",//预览主题
        //      editorTheme: "pastel-on-dark",//编辑主题*/
        // 	tex : true,                   // 开启科学公式TeX语言支持，默认关闭
        // 	flowChart : true,             // 开启流程图支持，默认关闭
        // 	sequenceDiagram : true,       // 开启时序/序列图支持，默认关闭,
        // 	//图片上传
        // 	imageUpload : true,
        // 	imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
        // 	imageUploadURL : "/article/file/upload", //图片上传路径
        // 	onload : function() {
        // 		console.log('onload', this);
        // 		//加载完成后 配置生成目录
        // 		testEditor.config("tocDropdown", true);
        // 		initPasteDragImg(this); //必须
        // 	},
        // 	/*onload : function() {
        // 		console.log('onload', this);
        // 		//加载完成后 配置生成目录
        // 		testEditor.config("tocDropdown", true);
        //
        // 	},*/
        // 	/*onload : function() {
        // 		console.log('onload', this);
        // 		//加载完成后 配置生成目录
        // 		testEditor.config({
        // 			tocDropdown   : true,
        // 			tocTitle      : "目录 Table of Contents",
        // 		});
        //
        // 	},*/
        // 	/*指定需要显示的功能按钮*/
        // 	toolbarIcons : function() {
        // 		return ["undo","redo","|",
        // 			"bold","del","italic","quote","ucwords","uppercase","lowercase","|",
        // 			"h1","h2","h3","h4","h5","h6","|",
        // 			"list-ul","list-ol","hr","|",
        // 			"link","reference-link","image","code","preformatted-text",
        // 			"code-block","table","datetime","emoji","html-entities","pagebreak","|",
        // 			"goto-line","watch","preview","fullscreen","clear","search","|",
        // 			"help","info","importFile","releaseIcon", "index"]
        // 	},
        //
        // 	/*自定义功能按钮，下面我自定义了2个，一个是发布，一个是返回首页*/
        // 	toolbarIconTexts : {
        // 		releaseIcon : "<span bgcolor=\"gray\">发布</span>",
        // 		index : "<span bgcolor=\"red\">返回首页</span>",
        // 		importFile : "<span bgcolor=\"red\">导入文件</span>"
        // 	},
        //
        // 	/*给自定义按钮指定回调函数*/
        // 	toolbarHandlers:{
        // 		importFile: function(){
        // 			$("#importFile").click();
        // 		},
        // 		releaseIcon : function(cm, icon, cursor, selection) {
        // 			//表单提交
        // 			console.log($("#content").val());
        // 			var content = $("#content").val();
        //
        // 			var title = $("#title").val();
        // 			if (title == ""){
        // 				layui.use('layer',function(){
        // 					layer=layui.layer;
        // 					layer.msg('标题不能为空',{
        // 						icon:2
        // 					});
        // 				})
        // 				return
        // 			}
        // 			var article = {};
        // 			article["title"] = title;
        // 			article["content"]=content;
        // 			article["groupsId"]=$("#groupsId").val();
        // 			article["tags"]=$("#tags").val();
        // 			article["description"]=$("#description").val();
        // 			addArticle(article)
        // 			// mdEditorForm.method = "post";
        // 			// mdEditorForm.action = "/article/addArticle?contentCheck="+content;//提交至服务器的路径
        // 			// mdEditorForm.submit();
        // 		},
        // 		index : function(){
        // 			window.location.href = '/article/add_article';//刷新当前页面
        // 		},
        // 	}
        // });
    });
    function EditorData(data) {
        testEditor = editormd("article-content", {
            placeholder: "欢迎使用",
            value: data,
            width : "95%",
            height : "500px",
            syncScrolling : "single",
            path : "../md/lib/", //使用自己的路径
            saveHTMLToTextarea : true,    // 保存 HTML 到 Textarea
            emoji: true,
            /* theme: "dark",//工具栏主题
             previewTheme: "dark",//预览主题
             editorTheme: "pastel-on-dark",//编辑主题*/
            tex : true,                   // 开启科学公式TeX语言支持，默认关闭
            flowChart : true,             // 开启流程图支持，默认关闭
            sequenceDiagram : true,       // 开启时序/序列图支持，默认关闭,
            //图片上传
            imageUpload : true,
            imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL : "/article/file/upload", //图片上传路径
            onload : function() {
                console.log('onload', this);
                //加载完成后 配置生成目录
                testEditor.config("tocDropdown", true);
                initPasteDragImg(this); //必须
            },
            /*onload : function() {
                console.log('onload', this);
                //加载完成后 配置生成目录
                testEditor.config("tocDropdown", true);

            },*/
            /*onload : function() {
                console.log('onload', this);
                //加载完成后 配置生成目录
                testEditor.config({
                    tocDropdown   : true,
                    tocTitle      : "目录 Table of Contents",
                });

            },*/
            /*指定需要显示的功能按钮*/
            toolbarIcons : function() {
                return ["undo","redo","|",
                    "bold","del","italic","quote","ucwords","uppercase","lowercase","|",
                    "h1","h2","h3","h4","h5","h6","|",
                    "list-ul","list-ol","hr","|",
                    "link","reference-link","image","code","preformatted-text",
                    "code-block","table","datetime","emoji","html-entities","pagebreak","|",
                    "goto-line","watch","preview","fullscreen","clear","search","|",
                    "help","info","importFile","releaseIcon", "index"]
            },

            /*自定义功能按钮，下面我自定义了2个，一个是发布，一个是返回首页*/
            toolbarIconTexts : {
                releaseIcon : "<span bgcolor=\"gray\">发布</span>",
                index : "<span bgcolor=\"red\">返回首页</span>",
                importFile : "<span bgcolor=\"red\">导入文件</span>"
            },

            /*给自定义按钮指定回调函数*/
            toolbarHandlers:{
                importFile: function(){
                    $("#importFile").click();
                },
                releaseIcon : function(cm, icon, cursor, selection) {
                    //表单提交
                    console.log($("#content").val());
                    var content = $("#content").val();

                    var title = $("#title").val();
                    if (title == ""){
                        layui.use('layer',function(){
                            layer=layui.layer;
                            layer.msg('标题不能为空',{
                                icon:2
                            });
                        })
                        return
                    }
                    var article = {};
                    article["articleId"] = $("#articleId").val();
                    article["title"] = title;
                    article["content"]=content;
                    article["groupsId"]=$("#groupsId").val();
                    article["tags"]=$("#tags").val();
                    article["description"]=$("#description").val();
                    addArticle(article)
                    // mdEditorForm.method = "post";
                    // mdEditorForm.action = "/article/addArticle?contentCheck="+content;//提交至服务器的路径
                    // mdEditorForm.submit();
                },
                index : function(){
                    window.location.href = '/article/add_article';//刷新当前页面
                },
            }
        });
    }
    function addArticle(data) {
        $.ajax({
            type:'post',
            url:'/article/addArticle',
            data:data,
            async: false,
            success:function (data) {
                if (data.code==200){
                    layui.use('layer',function(){
                        layer=layui.layer;
                        layer.msg(data.msg,{
                            icon:1
                        });
                    });
                    window.location.href = "/article/data_article"
                }else {
                    layui.use('layer',function(){
                        layer=layui.layer;
                        layer.msg("发布失败",{
                            icon:2
                        });
                    })
                }

            }
        });
    }
</script>
</html>